
<!DOCTYPE html>
<html lang="en"
                xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>蜗牛金服</title>
    <script th:src="@{static/js/vue.js}"></script>
    <script th:src="@{static/js/elementUI.js}"></script>
    <script th:src="@{static/js/axios.js}"></script>
    <link th:href="@{static/css/elementUI.css}" rel="stylesheet" />


    <style>


        .el-header {
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
        }

        .el-aside {
            color: #333;
        }

        /*下拉菜单的样式*/
        .el-dropdown-link {
            cursor: pointer;
            color: #409EFF;
        }
        .el-icon-arrow-down {
            font-size: 12px;
        }
        /*取消a标签的下划线*/
        a{text-decoration:none}

    </style>

</head>
<body>
        <div id="pagehead">
            <div class="line" ></div>
            <el-menu
                    :default-active="activeIndex2"
                    class="el-menu-demo"
                    mode="horizontal"
                    @select="handleSelect"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b">
                <el-menu-item ><font size="5px" color="#ffd700">蜗牛金服后台业务管理系统</font></el-menu-item>
                <el-menu-item index="2"  style="float: right"><i class="el-icon-switch-button" ></i>退出</el-menu-item>

                </el-popover>

                <el-menu-item index="3"  style="float: right"  >
                    <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
                <i class="el-icon-date" > </i> 常用菜单<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="a" >产品列表</el-dropdown-item>
                            <el-dropdown-item command="b">订单列表</el-dropdown-item>
                            <el-dropdown-item command="c">用户管理</el-dropdown-item>
                            <el-dropdown-item command="d" >交易统计</el-dropdown-item>
                            <el-dropdown-item command="e" divided>菜单管理</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-menu-item>

                <el-menu-item index="1"  style="float: right"  >
                    <el-popover
                            placement="top-start"
                            title="账户信息"
                            width="650"
                            trigger="hover">
                        <hr>
                        <template>
                            <el-table
                                    :data="tableData"
                                    stripe
                                    style="width: 100%">
                                <el-table-column
                                        prop="dept"
                                        label="所在部门"
                                        width="200">
                                </el-table-column>
                                <el-table-column
                                        prop="time1"
                                        label="本次登录时间"
                                        width="200">
                                </el-table-column>
                                <el-table-column
                                        prop="time2"
                                        label="上次登录时间"
                                        width="250">
                                </el-table-column>
                            </el-table>
                        </template>
                        <a href="#" style="float:left">账户设置</a>
                        <div slot="reference"><i class="el-icon-place" > </i>{{adminName}}</div>
                    </el-popover>

                </el-menu-item>
                <!--头像-->
                <el-menu-item index="2"  style="float: right"><template>
                    <div class="demo-type">
                        <div>
                            <el-avatar th:src="@{static/img/1caicai.jpg}"></el-avatar>
                        </div>
                    </div>
                </template></el-menu-item>

            </el-menu>
        </div>


<div id="app">
    <el-container style="height: 100%; border: 1px solid #eee ; min-height: 860px">
        <el-aside width="230px"  style="background-color: rgb(238, 241, 246)">
            <el-menu  background-color="#333744" text-color="#fff" >
                <el-submenu index="1" >
                    <template slot="title" ><i class="el-icon-s-home" ></i>系统首页</template>
                    <el-menu-item-group>
                        <el-menu-item index="1-1" @click="syspage"><font color="#7cfc00">系统首页</font></el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title"><i class="el-icon-user"></i>用户管理</template>
                    <el-menu-item-group>
                        <el-menu-item index="2-1" @click="userlist"><font color="#7cfc00">用户管理</font></el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="3">
                    <template slot="title"><i class="el-icon-s-check"></i>渠道管理</template>
                    <el-menu-item-group>
                        <el-menu-item index="3-1" @click="channelmag"><font color="#7cfc00">渠道管理</font></el-menu-item>
                    </el-menu-item-group>
                </el-submenu>

                <el-submenu index="4">
                    <template slot="title"><i class="el-icon-setting"></i>运营管理</template>
                    <el-menu-item-group>
                        <el-menu-item index="4-1" @click="qainfor"><font color="#7cfc00">帮助管理</font></el-menu-item>
                        <el-menu-item index="4-3" @click="ads"><font color="#7cfc00">广告管理</font></el-menu-item>
                        <el-menu-item index="4-4" @click="cous"><font color="#7cfc00">优惠券管理</font></el-menu-item>
                    </el-menu-item-group>
                </el-submenu>

                <el-submenu index="5">
                    <template slot="title"><i class="el-icon-warning"></i>风控审核</template>
                    <el-menu-item-group>
                        <el-menu-item index="5-1"  @click="order2"><font color="#7cfc00">审核任务处理</font></el-menu-item>

                    </el-menu-item-group>
                </el-submenu>

                <el-submenu index="6">
                    <template slot="title"><i class="el-icon-message"></i>风控管理</template>
                    <el-menu-item-group>
                        <template slot="title">风控引擎</template>
                        <el-menu-item index="6-1" @click="entranceRule"><font color="#7cfc00">准入规则引擎</font></el-menu-item>
                        <el-menu-item index="6-2" @click="fraud"><font color="#7cfc00">反欺诈引擎</font></el-menu-item>
                    </el-menu-item-group>


                    <el-menu-item-group>
                        <template slot="title">其他编辑器</template>
                        <el-menu-item index="6-4" @click="applydataconfig"><font color="#7cfc00">申请资料配置</font></el-menu-item>
                        <el-menu-item index="6-5" @click="phonecheck"><font color="#7cfc00">电核项配置</font></el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="7">
                    <template slot="title"><i class="el-icon-notebook-1"></i>合同管理</template>
                    <el-menu-item-group>
                        <el-menu-item index="7-1" @click="contract"><font color="#7cfc00">合同签署查询</font></el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="8">
                    <template slot="title"><i class="el-icon-document-checked"></i>贷后管理</template>
                    <el-menu-item-group>
                        <template slot="title">还款管理</template>
                        <el-menu-item index="8-1"  @click="tables"><font color="#7cfc00">还款提醒</font></el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group>
                        <template slot="title">催收管理</template>
                        <el-menu-item index="8-5" @click="tableses"><font color="#7cfc00">减免申请处理</font></el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group>
                        <template slot="title">贷后报表</template>
                        <el-menu-item index="8-9"  @click="table2"><font color="#7cfc00">逾期明细</font></el-menu-item>
                        <el-menu-item index="8-10" @click="tablese"><font color="#7cfc00">提前还款明细</font></el-menu-item>
                    </el-menu-item-group>
                </el-submenu>

                <el-submenu index="9">
                    <template slot="title"><i class="el-icon-s-tools"></i>系统管理</template>
                    <el-menu-item-group>
                        <template slot="title">金融产品管理</template>
                        <el-menu-item index="9-1" @click="productmag"><font color="#7cfc00">产品列表</font></el-menu-item>
                        <el-menu-item index="9-2" @click="productLogmag"><font color="#7cfc00">产品日志</font></el-menu-item>
                        <el-menu-item index="9-3" @click="productCheck"><font color="#7cfc00">产品审核</font></el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group>
                        <template slot="title">消息查询</template>
                        <el-menu-item index="9-4" @click="sysmessage"><font color="#7cfc00">系统消息</font></el-menu-item>
                        <el-menu-item index="9-5" @click="emailmessage"><font color="#7cfc00">邮件消息</font></el-menu-item>
                        <el-menu-item index="9-6"  @click="stationmessage"><font color="#7cfc00">站内信消息</font></el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group>
                        <template slot="title">权限管理</template>
                        <el-menu-item index="9-7" @click="dept2"><font color="#7cfc00">部门管理</font></el-menu-item>
                        <el-menu-item index="9-8"  @click="staff"><font color="#7cfc00">成员管理</font> </el-menu-item>
                        <el-menu-item index="9-9" @click="customer"><font color="#7cfc00">客服管理</font></el-menu-item>
                        <el-menu-item index="9-10" @click="optLog"><font color="#7cfc00">操作日志</font></el-menu-item>
                    </el-menu-item-group>
                </el-submenu>


                </el-submenu>

            </el-menu>

        </el-aside>

        <iframe border="1" id="content" :src="src_1" frameborder="1"  width="100%"></iframe>
<!--        <iframe border="1" id="content" th:src="@{userlist}" frameborder="1"  width="100%"></iframe>-->
    </el-container>

</div>


</div>
<script type="text/javascript" th:inline="javascript">
    new Vue({
        el:'#app',
        data:{
             src_1:"syspage"

        },
        methods: {
            //系统首页
            syspage(){
                this.src_1="syspage"
            },
            userlist(){
                this.src_1="userlist"
            },
            // 渠道管理
             channelmag(){
                this.src_1="channelmag"
            },
            //产品列表
            productmag(){
                this.src_1="productmag"
            },
            //产品日志
            productLogmag(){
                this.src_1="productLogmag"
            },
            //产品审核
            productCheck(){
                this.src_1="productCheck"
            },
            //风控审核-审核任务处理
            order2(){
                this.src_1="order"
            },
            //跳转至：合同管理-合同签署查询
            contract(){
                this.src_1="contract"
            },
            //风控管理/反欺诈引擎
            fraud(){
                this.src_1="fraud"
            },
            //运营管理/优惠券管理
            cous(){
                this.src_1="cous"
            },
            //系统管理/客服管理
            customer(){
                this.src_1="customer"
            },


            //运营管理-帮助信息
            qainfor(){
                this.src_1="qainfor"
            },
            //运营管理-广告管理
            ads(){
                this.src_1="ads"
            },
            //风控管理-申请资料配置
            applydataconfig(){
                this.src_1="applydataconfig"
            },
            //风控管理-电核项配置
            phonecheck(){
                this.src_1="phonecheck"
            },


            //部门页面
            dept2(){
                this.src_1="dept"
            },
            //员工页面
            staff(){
                this.src_1="staff"
            },
            //日志页面
            optLog(){
                this.src_1="optLog"
            },
            //风险管理-准入规则页面
            entranceRule(){
                this.src_1="entranceRule"
            },


            //系统消息
            sysmessage(){
                this.src_1="sysmessage"
            },
            //站内信消息
            stationmessage(){
                this.src_1="stationmessage"
            },
            //邮件消息
            emailmessage(){
                this.src_1="emailmessage"
            },

            //跳转到逾期列表
            table2(){
                this.src_1="table"
            },
            //跳转到正常还款提醒表
            tables(){
                this.src_1="tables"
            },
            //跳转到提前还款明细表
            tablese(){
                this.src_1="tablese"
            },
            //跳转到减免列表
            tableses(){
                this.src_1="tableses"
            },

        }
    })
</script>

<script>
    let Main = {
        data() {
            return {

                activeIndex: '1',
                activeIndex2: '1',

                tableData: [{dept: '部门测试数据',
                    time1: '本次登录测试时间',
                    time2: '上次登录测试时间'}],
                adminName:"菲菲"

            };
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            handleCommand(command) {
                this.$message('click on item ' + command);
            }
        }
    }
    let Ctor = Vue.extend(Main)
    new Ctor().$mount('#pagehead')
</script>

</body>
</html>